import React, { useEffect, useRef } from 'react';
import './index.css';
import { connect } from 'react-redux';
import { once } from '../../../utils/common';
import { createProgressBar, setAudioConfig, setVideoConfig } from '../../../utils/progressbar';
const mapStateToProps = state => {
    return {
        music: state.music,
        video: state.video
    }
}
const initProgressBarOnce = once(createProgressBar);
function generateTemplate(type, { btnRef_0, curTimeRef, totalTimeRef, volRef }) {
    switch (type) {
        case 1:
            return (<>
                <span ref={curTimeRef} className="progress-time">00:00</span>
                <div className="progress-controls">
                    <div className="bar"></div>
                    <div ref={btnRef_0} className="dot-button" >
                        <div className="dot"></div>
                    </div>
                    <div className="curbar"></div>
                </div>
                <span ref={totalTimeRef} className="progress-time">00:00</span>
            </>)
        case 2:
            return (<>
                <span ref={volRef} className="progress-time iconfont"></span>
                <div className="progress-controls">
                    <div className="bar"></div>
                    <div ref={btnRef_0} className="dot-button" >
                        <div className="dot"></div>
                    </div>
                    <div className="curbar"></div>
                </div>
                <span className="progress-time iconfont icon-touping"></span>
            </>)
        case 3:
            return (<>
                <div className="progress-controls video">
                    <div className="bar"></div>
                    <div ref={btnRef_0} className="dot-button" >
                        <div className="dot"></div>
                    </div>
                    <div className="curbar"></div>
                </div>
            </>)
        default:
            return (<></>)
    }
}
// Type 1  -- music
// Type 2  -- volume
// Type 3  -- video
const ProgressBar = ({ music, type, others, video }) => {
    const btnRef_0 = useRef();
    const curTimeRef = useRef();
    const totalTimeRef = useRef();
    const volRef = useRef();
    let refs = {
        btnRef_0,
        curTimeRef,
        totalTimeRef,
        volRef
    }
    let config = {
        curTime: curTimeRef.current,
        totalTime: totalTimeRef.current,
        vol: volRef.current,
        loop: true
    }
    useEffect(() => {
        if (type === 3) {
            if (video.curVideo.vid) {
                console.log("Video progress bar init", video.dom);
                createProgressBar(type, btnRef_0.current, video.dom, config);
                setVideoConfig(video.dom, config, btnRef_0.current);
            }
        } else {
            if (music.curSong && music.curSong.url) {
                console.log(`ProgressBar -- ${type}  init`)
                createProgressBar(type, btnRef_0.current, music.curSong.audio, config);
                if (type === 1) setAudioConfig(music.curSong.audio, config, btnRef_0.current, others);
                
            }
        }
    }, [music.curSong.url, video.curVideo.vid]);
    return (
        <div className="progress-bar">
            {
                generateTemplate(type, refs)
            }
        </div>
    )
}

export default connect(mapStateToProps)(ProgressBar);